<template>
  <div class="car-stock-body">
    <!-- 表格 -->
    <div class="table-main">
      <TableLeft :selectable="selectable" />
      <TableRight ref="tableRightRef" />
      <a-empty style="height: 16vh" v-if="stockState.stockData.length == 0" />
    </div>
  </div>
</template>

<script lang="ts" name="CarStockTable">
  import { ref, inject } from 'vue'
  import TableLeft from './table-left.vue'
  import TableRight from './table-right.vue'

  export default {
    components: {
      TableLeft,
      TableRight,
    },
    setup() {
      const stockState = inject('stockState')
      // 是否可选择
      const selectable = stockState.selector != null
      const tableRightRef = ref()

      return {
        tableRightRef,
        selectable,
        stockState,
      }
    },
  }
</script>

<style lang="less" scoped>
  .table-main {
    border: 1px solid #dedfe0;
    padding: 0 2px 0 0;
    position: relative;
    overflow: hidden;
    &-scroll {
      overflow-x: scroll;
    }
  }
  .emptyWrap {
    display: inline-block;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
  }
</style>
